import React from "react";

const userRoles = [
  { name: "设计用户", key: "designer", desc: "只能录入属性表中数据来源为 E 的行数据" },
  { name: "采购用户", key: "procurement", desc: "只能录入属性表中数据来源为 P 的行数据" },
  { name: "施工用户", key: "construction", desc: "只能录入属性表中数据来源为 C、O、R 的行数据" },
  { name: "管理员用户", key: "admin", desc: "可以录入属性表中所有数据，并可管理数据导入和用户管理" },
];

export default function UserManagementPage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">用户管理</h1>
      <p className="mb-6 text-gray-600">系统支持基于角色的数据录入权限控制，不同角色用户只能录入特定数据来源的属性数据：</p>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {userRoles.map((role) => (
          <div key={role.key} className="border rounded-lg p-4 bg-white shadow-sm">
            <h2 className="text-xl font-semibold mb-2">{role.name}用户</h2>
            <p className="text-gray-700">{role.desc}</p>
          </div>
        ))}
      </div>
      <div className="mt-8 text-gray-500 text-sm">
        <p>后续将在此页面实现用户的增删改查及权限分配功能。</p>
      </div>
    </div>
  );
} 